<template>
  <div class="bigbetter">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="18">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.betting.name") }}</strong>
      <span @click="$openPage('/kefu')"><NuxtImg src="/img/kefu.png" alt="" /></span>
    </header>
    <main class="tran">
      <ul>
        <li>
          <el-select class="select" v-model="bettingForm.coinType" placeholder="Select" size="large"
            popper-class="writebetting">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <span></span>
          <el-select class="select" v-model="bettingForm.platformId" placeholder="Select" size="large"
            popper-class="writebetting">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </li>
        <li>
          <el-date-picker class="time" popper-class="datetime" v-model="startDateTime" type="datetime"
            placeholder="Pick a Date" date-format="YYYY-MM-DD" time-format="HH:mm:ss" format="YYYY-MM-DD" />
          <span>~</span>
          <el-date-picker class="time" v-model="endDateTime" popper-class="datetime" type="datetime"
            placeholder="Pick a Date" format="YYYY-MM-DD" time-format="HH:mm:ss" />
        </li>
      </ul>
      <dl v-if="recordData.gameRecords.length != 0" v-infinite-scroll="initData" :infinite-scroll-immediate="false"
        infinite-scroll-distance=0>
        <dd v-for="item in recordData.gameRecords" :key="item.recordId">
          <div class="top">
            <div>
              <NuxtImg src="/img/pg.png" alt="" />
              <span>{{ item.platformId }}</span>
            </div>
            <strong :class="Number(item.winningCoins) < 0 ? 'red' : 'green'">{{ Number(item.winningCoins) }}</strong>
          </div>
          <h3>
            <!-- <span>{{ AllGameList.find((i) => i.game_uid == item.gameUID).name }}</span> -->
          </h3>
          <ul>
            <li>
              <span>{{ $t('language.betting.singleID') }}</span>
              <div>
                <strong>{{ item.roundId }}</strong>
                <!-- @click="copyToClipboard(item.roundId, proxy)" -->
                <el-button @click="copyToClipboard(item.roundId)">{{ $t('language.betting.copy') }}</el-button>
              </div>
            </li>
            <li>
              <div>
                <span>{{ $t('language.betting.Betting') }}</span>
                <NuxtImg src="/img/mylrft.png" alt="" />
                <i>{{ item.bettingCoins }}</i>
              </div>
              <p>{{ item.playtime }}</p>
            </li>
          </ul>

        </dd>
      </dl>
      <div class="footer" v-if="!loadingbetting && recordData.gameRecords.length == 0">
        <NuxtImg src="/img/bg2.png" alt="" />
        <p>{{ $t("language.betting.nodata") }}</p>
      </div>
    </main>
  </div>
</template>
<script setup lang="ts">
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { reactive, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
import { AllGameList } from "~/utils/gamelist"
import { computed } from "vue";

const { t } = useI18n();
let store = useStore()
let info:any = computed<any>(() => store.userinfo)
let bettingForm = reactive({
  id: info.value.gameID,
  coinType: 0,
  platformId: 0,
  startDateTime: getDay('-'),
  endDateTime: getDay('-'),
  pageIndex: 1,
  pageSize: 10
})

let recordData = reactive({
  page: {
    pageIndex: 0,
    pageSize: 0,
    totalCount: 0
  },
  gameRecords: [] as any
})
// 复制
let copyToClipboard = (text: string | number | null | undefined) => {
  let tmpTextField: any = document.createElement("textarea");
  tmpTextField.textContent = text;
  tmpTextField.setAttribute("style", "position:absolute; right:200%;");
  document.body.appendChild(tmpTextField);
  tmpTextField.select();
  tmpTextField.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
  ElMessage({
    message: t("language.commontips.copysuccess"),
    type: "success",
    duration: 1000,
  });
}
//加载loading
let loadingbetting = shallowRef<boolean>(true)
//数据初始化
let startDateTime =shallowRef<string>("")
let endDateTime = shallowRef<string>("")
startDateTime.value = getDay('-')
endDateTime.value = getDay('-')
let initData = () => {
  loadingbetting.value = true
  useHttpPOST("/Game/v1.0/Record/BetRecord", bettingForm).then(({ data }: { data: any }) => {
    recordData.gameRecords.push(...data.value.data.gameRecords)
    recordData.page = data.value.data.page
    bettingForm.pageIndex++
  }).finally(() => {
    let time = setInterval(() => {
      ElLoading.service({
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'el-loading'
      }).close()
      loadingbetting.value = false
      clearInterval(time)
    }, 300)
  })
}
// 监听变化从新获取数据
watch([() => bettingForm.coinType, () => bettingForm.platformId], () => {
  bettingForm.pageIndex = 1
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  recordData.gameRecords = []
  initData()
})
watch([() => startDateTime.value, () => endDateTime.value], (newval, oldval) => {
  bettingForm.pageIndex = 1
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  recordData.gameRecords = []
  bettingForm.startDateTime = formatDateTime(newval[0])
  bettingForm.endDateTime = formatDateTime(newval[1])
  initData()
}, {
  immediate: true
})



const options1 = [
  {
    value: 0,
    label: t("language.betting.all"),
  },
];
const options = [
  {
    value: 0,
    label: t("language.betting.all"),
  },
  {
    value: 1,
    label: "BRL",
  },
  {
    value: 2,
    label: "USDT",
  },
];

</script>
<style lang="scss">
.writebetting .el-select-dropdown__item {
  color: #b9bdc9 !important;
  background-color: transparent !important;
}

.writebetting .selected span {
  color: #fff !important;
  background-color: transparent !important;
}

.writebetting .hover {
  color: #fff !important;
}

.writebetting .is-focus {
  border-color: #0a906c !important;
}

.writebetting .el-input--suffix {
  border-color: #0a906c !important;
}

.writebetting .el-tooltip__trigger {
  border-color: #0a906c !important;
}

.writebetting .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}

.datetime .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}

.el-input__inner {
  color: #fff !important;
}

.el-input {
  border: none !important;
  box-shadow: none !important;
}

.el-picker-panel__body-wrapper,
.el-picker-panel,
.el-picker-panel__footer,
.el-date-picker,
.el-popper,
.el-time-panel,
.el-popper__arrow::before {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.cancel {
  color: #fff !important;
}

.el-time-spinner__item.is-active {
  color: #fff !important;
}

.el-time-panel__btn.confirm {
  color: #0a906c !important;
}

.el-time-panel__footer {
  border-top: none !important;
}

.el-date-table th {
  border-bottom: solid 1px rgb(74, 76, 83) !important;
}

.el-button.is-text {
  color: #fff;
}

.el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}

.el-date-picker__time-header {
  border-bottom: 1px solid rgb(74, 76, 83) !important;
}

.today .el-date-table-cell__text {
  color: #0a906c !important;
  font-weight: normal !important;
  box-shadow: none !important;
  font-weight: bold !important;
}

.current .el-date-table-cell__text {
  color: #fff !important;
  background-color: #0a906c !important;
  font-weight: normal !important;
}

.next-month {
  background-color: rgb(61, 64, 72) !important;
  color: #fff !important;
}

.available {
  color: #fff !important;
}



/*
.custom-time .el-input__inner {
  color: #fff !important;
}
.custom-time .el-input__wrapper {
  background-color: rgb(39, 42, 48) !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid rgb(74, 76, 83) !important;
  box-shadow: none !important;
}
.custom-time  .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}
.custom-time .el-button.is-plain {
  background-color: transparent !important;
  border-color: #0a906c !important;
  color: #0a906c !important;
}*/
</style>
<style scoped lang="scss">
:deep(.el-popper__arrow::before) {
  background-color: rgb(29, 30, 34) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.bigbetter {
  width: 100%;

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      height: 28px;
      width: 28px;
      line-height: 28px;
      @include flex(row, flex-start, center);
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .tran {
    background-color: #1a1a1a;
    padding: 45px 0px 20px;
    width: 100%;
    height: 100vh;
    background-color: rgb(26, 26, 26);
    @include flex(column, flex-start, center);

    >ul {
      width: 100%;
      padding: 20px;
      height: 146px;

      :deep(.el-select__wrapper) {
        background-color: rgb(39, 42, 48) !important;
        box-shadow: none;
        border: 1px solid #4a4c53;
      }

      :deep(.el-select__selected-item) {
        color: #fff !important;
      }

      :deep(.el-input__wrapper) {
        background-color: rgb(39, 42, 48) !important;
        box-shadow: none;
        border: 1px solid #4a4c53;
        height: 40px !important;
      }

      :deep(.el-picker-panel__body-wrapper) {
        background-color: rgb(39, 42, 48) !important;
        color: #fff;
      }

      :deep(.el-input__prefix) {
        color: #fff !important;
      }

      :deep(.el-input__wrapper) {
        color: #fff !important;
      }

      .datetime {
        background-color: 000 !important;
      }

      .write {
        background: rgb(39, 42, 48) !important;
        color: #fff;
      }

      li {
        @include flex(row, center, center);

        span {
          font-size: 16px;
          color: #fff;
          display: block;
          margin: 0 5px;
        }
      }

      li+li {
        margin-top: 20px;
      }

      li:nth-child(1) {
        @include flex(row, center, center);

        :deep(.el-select) {
          width: 140px;
        }

        span {
          display: block;
          width: 20px;
          text-align: center;
        }
      }

      li:nth-child(2) {
        span {
          display: block;
          width: 20px;
          text-align: center;
        }

        :deep(.el-date-editor) {
          width: 140px;
        }
      }
    }

    dl {
      overflow: auto;
      flex: 1;
      padding: 0 15px;
      width: 100%;
      margin-top: 20px;

      dd+dd {
        margin-top: 20px;
      }

      dd {
        background-color: rgb(36, 38, 43);
        border-radius: 10px;
        width: 100%;
        padding: 10px 0;



        .top {
          @include flex(row, space-between, center);
          width: 100%;
          padding: 10px 10px 15px;
          border-bottom: 1px solid rgba(74, 76, 83, 0.36470588235294116);

          div {
            @include flex(row, flex-start, center);

            img {
              width: 30px;
              height: 30px;
              border-radius: 15px;
              background: #133ea1;
              margin-right: 10px;
            }

            span {
              font-size: 18px;
              color: #fff;
            }
          }

          .red {
            font-size: 16px;
            color: #d6111a;
            font-weight: 600;
          }

          .green {
            font-size: 16px;
            color: #5bb92f;
            font-weight: 600;
          }


        }

        h3 {
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
          font-size: 16px;
          color: #fff;
        }



        ul {
          width: 100%;

          li:nth-child(1) {
            height: 52px;
            width: 100%;
            padding: 0 10px;
            background: #3b3e47;
            @include flex(row, space-between, center);

            span {
              color: #fff;
              font-size: 16px;
            }

            div {
              @include flex(row, flex-end, center);

              strong {
                color: #b5bac8;
                font-size: 16px;
                font-weight: normal;
                padding-right: 5px;
              }

              :deep(.el-button) {
                background-color: #0a906c;
                border-color: #0a906c;
                color: #fff;
                height: 32px;
                width: 56px;
                font-size: 12px;
              }
            }
          }

          li:nth-child(2) {
            @include flex(row, space-between, center);
            padding: 0 10px;

            p {
              color: #b5bac8;
              font-size: 16px;
            }

            div {
              @include flex(row, flex-start, center);

              height: 46px;

              span {
                font-size: 16px;
                color: #fff;
              }

              img {
                width: 26px;
                margin: 0 5px;
              }

              i {
                font-size: 16px;
                color: #b5bac8;
                font-weight: normal;
                font-style: normal;
              }
            }
          }
        }
      }

    }

    .footer {
      height: 400px;
      @include flex(column, center, center);

      img {
        width: 165px;
        margin: 0 auto;
      }

      p {
        font-size: 16px;
        color: #b5bacb;
        margin-top: 20px;
      }
    }
  }
}
</style>
